<template>
  <div class="m-login-container">
    <el-row class="m-main-header-search">
      <el-button
        @click="handleOpareteClick(1)"
        type="primary"
        size="small"
        icon="el-icon-circle-plus-outline"
      >
        新增
      </el-button>
    </el-row>
    <div class="m-main-content-body">
       <p class="contant-body-title">套餐组</p>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="list"
        stripe
        tooltip-effect="dark"
        style="width: 100%"
        @cell-click="handleCopySn"
        :header-cell-style="{
          'background-color': '#E5EEFF',
        }"
      >
        <el-table-column prop="name" label="主产品" width="200">
        </el-table-column>
        <el-table-column
          prop="sn"
          label="对外编号"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="product_sn"
          label="产品编号"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="product_name"
          label="产品名称"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="b_sn"
          label="b组对外编号"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="b_product_name"
          label="b产品名称"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="a_region"
          label="a产品地区"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="b_region"
          label="b产品地区"
          width="160"
        ></el-table-column>
        <el-table-column prop="user_name" label="所属用户"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column prop="time" label="时间" width="160">
          <template slot-scope="scope">
            {{
              scope.row.time
                ? $moment(scope.row.time).format("YYYY/MM/DD HH:mm:ss")
                : "--"
            }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              class="table-operate-btn"
              @click="handleOpareteClick(2, scope.row)"
              type="text"
              size="small"
            >
              编辑
            </el-button>
            <el-button
              class="table-operate-btn red-btn-text"
              @click="del(scope.row.id)"
              type="text"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="(val) => handlePageMetaChange(val, 'size')"
          @current-change="(val) => handlePageMetaChange(val, 'page')"
          :current-page="pageMeta.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageMeta.limit"
          layout="sizes, prev, next, jumper"
          :total="pageMeta.total"
        >
        </el-pagination>
      </div>
    </div>
    <dialog-copy
      v-if="dialogCopyVisible"
      @close="dialogCopyVisible = false"
      :info="copySnValue"
    ></dialog-copy>
  </div>
</template>

<script>
import { copy2Clipboard } from "@/utils/index";

import DialogCopy from "./components/DialogCopy";
export default {
  components: {
    DialogCopy,
  },
  data() {
    return {
      list: [],
      loading: false,
      dialogCopyVisible: false,
      copySnValue: "",
      pageMeta: {
        page: 1,
        limit: 10,
        total: 1e10,
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    /*
     * @Desc: 获取列表
     * @params: {String}
     * @return: {Object}
     */
    async getList() {
      this.loading = true;
      const { data } = await this.$api.compose.getList({
        ...this.pageMeta,
        page: this.pageMeta.page - 1,
      });
      const { code, data: list } = data;
      if (code === 200) {
        this.list = list;
      }
      this.loading = false;
    },

    /*
     * @Desc: 删除
     * @params: {String}
     * @return: {Object}
     */
    async del(id) {
      this.$delConfirm(null, null, async () => {
        const { data } = await this.$api.compose.composeGroupOperate({
          delete: {
            id,
          },
        });
        const { code } = data;
        if (code === 200) {
          this.$message.success("删除成功");
          this.pageMeta.page = 0;
          this.getList();
        }
      });
    },

    /*
     * @Desc: 编辑/新增
     * @params: {String}
     * @return: {Object}
     */
    async handleOpareteClick(type, row = {}) {
      const query = {
        type,
      };
      if (row.id) query.id = row.id;
      this.$router.push({
        name: "composeInfo",
        query,
      });
    },

    /**
     * @Desc 分页
     * @params {String} val page/limit
     * @params {String} type  page/size
     * @return {Object}
     * */
    handlePageMetaChange(val, type = "size") {
      this.pageMeta[type === "size" ? "limit" : "page"] = val;
      this.getList();
    },

    /*
     * @Desc: 复制剪切板
     * @params: {String}
     * @return: {Object}
     */
    copy2Clipboard,

    handleCopySn({ product_sn }) {
      this.copySnValue = product_sn;
      this.dialogCopyVisible = true;
    },
  },
};
</script>

<style lang="less" scoped></style>
